import React from "react";
import { Route, Routes, Link } from "react-router-dom";
import PrivateRoute from "./components/PrivateRoute";
import Dashboard from "./views/Dashboard";
import Home from "./views/Home";
import Login from "./views/Login";
import Me from "./views/Me";
import Chat from "./views/Chat";
import Setting from "./views/Setting";
import Form from "./views/Form";
import Todo from "./views/Todo";

function App() {
  return (
    <div className="App">
      <Routes>
        {/* 嵌套子路由是放在 Mylayout 组件中，所以父组件的路径后需要跟上 * 否则无法渲染子组件 */}
        <Route
          path="/*"
          element={<PrivateRoute component={Dashboard}></PrivateRoute>}
        >
          <Route index element={<Home />} />
          <Route path="me" element={<Me />} />
          <Route path="chat" element={<Chat />} />
          <Route path="setting" element={<Setting />} />
          <Route path="form" element={<Form />} />
          <Route path="todo" element={<Todo />} />
        </Route>
        <Route path="/login" element={<Login />} />
      </Routes>
    </div>
  );
}

export default App;
